<template>
    <div :class="`select-modal-header ${mode}`">
        <div class="action-item cancel-action" @click="cancelAction">{{cancelText}}</div>
        <div class="action-item ok-action" @click="okAction">{{okText}}</div>
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'SelectModalHeader', // 选择弹窗顶部
    mixins: [ModeMixin],
    props: {
        cancelText: {
            type: String,
            default: '取消',
        },
        okText: {
            type: String,
            default: '确定',
        },
    },
    methods: {
        cancelAction() {
            this.$emit('cancel');
        },
        okAction() {
            this.$emit('ok');
        },
    },
};
</script>

<style lang="less">
.select-modal-header {
    height: 48px;
    border-bottom: 1px solid rgba(125, 125, 131, 0.2);
    .flex();
    justify-content: space-between;
    align-items: center;
    .mode-white();
    .action-item {
        width: 48px;
        height: 48px;
        .flex-row-center();
        font-size: @font-size-md;
        font-weight: 500;
        &.cancel-action {
            color: @tip-color;
        }
        &.ok-action {
            color: @shop-price-color;
        }
    }
}
</style>
